<template>
	<view class="container">
		<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/7c039dac-78d8-45c4-97ba-60af52a0f945.png" mode="widthFix">
			<image class="qrcode" :src="appConfig.officialImg" style="width: 38.4%;" mode="widthFix"></image>
			<image v-if="data.imgBase64" class="qrcode-lite" :src="data.imgBase64" style="width: 38.4%;" mode="widthFix"></image>
		</image>
		<view class="btn">
			<view @tap="viewDetail">查看历史拉新情况</view>
			<view @click="saveImage">保存图片到相册</view>
		</view>
	</view>
	<canvas canvas-id="myCanvas" style="width: 375px;height: 804px;position: absolute;left: -9999px;top: -9999px;"></canvas>
</template>

<script setup>
	import { ref, reactive, getCurrentInstance } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { $generateReferralCode } from '@/http/apiManager.js'
	import appConfig from '@/config/appConfig.js'
	import storageManage from '@/util/storageManage.js'
	
	const { $infoBox } = getCurrentInstance().appContext.config.globalProperties
	
	const data = reactive({
		imgBase64: null,
		imgBase64Origin: null,	// 原始base64文件
	})
	
	onLoad(async () => {
		try{
			uni.showLoading({ title: '加载中...' })
			// 请求二维码图片
			const { bizData } = await $generateReferralCode({ pathUrl: 'pages/welcome/index' })
			data.imgBase64 = 'data:image/png;base64,' + bizData
			data.imgBase64Origin = bizData
			uni.hideLoading()
		}catch(e){}
		
	})
	
	/**
	 * 保存图片
	 */
	const saveImage = async () => {
		uni.showLoading({ title: '图片保存中' })
		try{
			const ctx = uni.createCanvasContext('myCanvas')
			const imageInfoBg = await uni.getImageInfo({ src: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/7c039dac-78d8-45c4-97ba-60af52a0f945.png' })
			const imageInfoQrcode = await uni.getImageInfo({ src: appConfig.officialImg })
			const fs = wx.getFileSystemManager();
			const fileName = 'IMG_' + new Date().getTime() + '.png'
			const filePath = uni.env.USER_DATA_PATH + '/' + fileName
			fs.writeFile({
				filePath,
				data: data.imgBase64Origin,
				encoding: 'base64',
				success: res => {
					ctx.drawImage(imageInfoBg.path, 0, 0,375,804); //绘制图
					ctx.drawImage(imageInfoQrcode.path, 119, 186, 144, 144)	// 公众号码
					ctx.drawImage(filePath, 119, 451,144,144);	// 小程序码
					ctx.draw(false,async () => {
						const { tempFilePath:filePath } = await uni.canvasToTempFilePath({ fileType: "png", canvasId: 'myCanvas' })
						try {
							const saveImageToPhotosAlbum = await uni.saveImageToPhotosAlbum({ filePath })
							$infoBox.toast('图片保存成功')
						} catch (error) {
							//TODO handle the exception
							$infoBox.toast(JSON.stringify(error))
						}
					})
				},
				fail: err => {
					$infoBox.toast(JSON.stringify(err))
				}
			})
			
		}catch(e){
			//TODO handle the exception
			$infoBox.toast(JSON.stringify(e))
		}
	}
	
	// 查看历史拉新
	function viewDetail(){
		uni.navigateTo({
			url: '/pageUser/invite/inviteDetail'
		})
	}

</script>

<style lang="less">
	.container{
		width: 100%;
		min-height: 100vh;
		overflow: hidden;
		&>image{
			width: 100%;
			position: relative;
			.qrcode{
				position: absolute;
				z-index: 99;
				top: 23.13%;
				left: 31.73%;
			}
			.qrcode-lite{
				position: absolute;
				z-index: 99;
				top: 56.09%;
				left: 31.73%;
			}
		}
		
		
		.btn{
			padding: 32rpx;
			display: flex;
			gap: 32rpx;
			justify-content: space-between;
			view{
				padding: 32rpx 35rpx;
				&:nth-child(1){
					font-weight: 500;
					font-size: 32rpx;
					color: #24C789;
					border-radius: 60rpx;
					border: 1rpx solid #24C789;
				}
				&:nth-child(2){
					font-weight: 500;
					font-size: 32rpx;
					background-color: #24C789;
					color: #fff;
					border-radius: 60rpx;
				}
			}
		}
	}
</style>
